<template>
  <div>
    <el-card
      style="
        width: 100%;
        height: 60px;
        display: flex;
        align-items: center;
        margin-top: 10px;
      "
      :body-style="{ padding: '0px' }"
    >
      <!-- <div style="display: flex;align-items: center;justify-items: center;"> -->
      <el-input
        style="width: 200px; margin-left: 10px"
        placeholder="查询标题"
        clearable
        v-model="search"
      ></el-input>
      <el-button type="primary" style="margin-left: 10px" @click="searchTitle"
        >查询</el-button
      >
      <el-button type="info" @click="reset">重置</el-button>
      <el-button
        type="primary"
        @click="
          dialogVisible = true;
          key = 'add';
        "
        >新增</el-button
      >
      <el-button type="danger" @click="delBatch(tableChecked)"
        >批量删除</el-button
      >
      <!-- </div> -->
      <!-- <div style="margin: 10px 0">
      <el-button type="primary" plain >新增</el-button>
      <el-button type="danger" plain >批量删除</el-button>
    </div> -->
    </el-card>
    <div style="margin-top: 10px">
      <el-table
        :data="tableData"
        stripe
        :header-cell-style="{ backgroundColor: 'aliceblue', color: '#666' }"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="id"
          label="序号"
          width="70"
          align="center"
        ></el-table-column>
        <el-table-column prop="title" label="标题"></el-table-column>
        <el-table-column
          prop="content"
          label="内容"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column prop="username" label="发布人"></el-table-column>
        <el-table-column prop="time" label="发布时间"></el-table-column>
        <el-table-column label="是否公开">
          <template v-slot="scope">
            <el-switch
              v-model="scope.row.open"
              :active-value="1"
              :inactive-value="0"
              @change="changeOpen(scope.row)"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="180">
          <template v-slot="scope">
            <el-button
              type="primary"
              plain
              @click="
                handleEdit(scope.row.id);
                key = 'edit';
              "
              >编辑</el-button
            >
            <el-button type="danger" plain @click="deleteNotice(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <div style="margin: 10px 0">
        <el-pagination
          background
          layout="prev, pager, next"
          :page-size="limit"
          :total="totalCount"
          :current-page="currentPage"
          @current-change="pageChange"
        />
      </div>
    </div>
    <el-dialog
      title="公告信息"
      width="40%"
      :close-on-click-modal="false"
      v-model="dialogVisible"
      :lock-scroll="false"
      @close="dialogClose"
    >
      <el-form
        label-width="80px"
        style="padding-right: 20px"
        :data="dialogData"
      >
        <el-form-item label="标题" prop="title">
          <el-input placeholder="标题" v-model="dialogData.title"></el-input>
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <el-input
            type="textarea"
            placeholder="内容"
            v-model="dialogData.content"
          ></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogClose">取 消</el-button>
        <el-button @click="addNotice">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import {
  addNoticeData,
  changeOpenData,
  deleteBatchNoticeData,
  deleteNoticeData,
  getNoticeById,
  getNoticeList,
  selectAll,
  updateNoticeData,
} from "@/api/notice";
import { ElMessage } from "element-plus";
import { ref } from "vue";
const dialogVisible = ref(false);
const tableData = ref([]);
const key = ref("");
//当前页面
let currentPage = ref(1);
// 总条数
let totalCount = ref(0);
// 每页显示限制
let limit = ref(10);
const pageData = ref({
  pageNum: currentPage.value,
  pageSize: limit.value,
});
const showNoticeData = async () => {
  const res = await getNoticeList(pageData.value);
  tableData.value = res.data.list;
  totalCount.value = res.data.total;
  // console.log(res)
};
showNoticeData();
const search = ref("");
const searchData = ref({
  pageNum: currentPage.value,
  pageSize: limit.value,
  title: search.value,
});
const searchTitle = async () => {
  searchData.value.title = search.value;
  const res = await selectAll(searchData.value);
  console.log(res);
  tableData.value = res.data.list;
  totalCount.value = res.data.total;
};
const reset = () => {
  search.value = "";
  searchData.value.title = "";
  showNoticeData();
};
const changeOpen = async (row) => {
  // console.log(updateData)
  const res = await changeOpenData(row.id, row.open);
  console.log(res);
  showNoticeData();
};
//新增
const dialogData = ref({
  id: 0,
  title: "",
  content: "",
  open: 0,
  userid: 0,
  time: "",
});

const dialogClose = () => {
  dialogVisible.value = false;
  dialogData.value.title = "";
  dialogData.value.content = "";
};
//删除
const deleteNotice = async (id) => {
  ElMessageBox.confirm("确定要删除吗？", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    lockScroll: false, // 防止抖动
  })
    .then(async () => {
      const res = await deleteNoticeData(id);
      //  console.log("data数据"+res.data)
      if (res.code == 200) {
        ElMessage({
          showClose: true,
          message: "删除成功",
          type: "success",
        });
        // showList()
        showNoticeData();
      } else {
        ElMessage({
          showClose: true,
          message: res.data.msg,
          type: "error",
        });
      }
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消删除",
      });
    });
  showNoticeData();
};
const noticeId = ref(0);

const handleEdit = async (id) => {
  dialogVisible.value = true;
  const res = await getNoticeById(id);
  console.log(res);
  console.log(res.data);
  noticeId.value = id;
  if (res.code == 200) {
    dialogData.value = res.data;
    dialogData.value.id = id;
  } else {
    ElMessage.error("获取失败");
  }
};
const addNotice = async () => {
  console.log(key.value);
  console.log(dialogData.value);
  if (key.value === "add") {
    const res = await addNoticeData(dialogData.value);
    // dialogVisible.value = true
    if (res.code === 200) {
      dialogVisible.value = false;
      ElMessage.success("新增成功");
      showNoticeData();
    } else {
      ElMessage.error("新增失败");
    }
  } else if (key.value === "edit") {
    const res = await updateNoticeData(dialogData.value);
    console.log(res);
    if (res.code === 200) {
      dialogVisible.value = false;
      ElMessage.success("修改成功");
      showNoticeData();
    } else {
      ElMessage.error("修改失败");
    }
  }
};

//分页
const pageChange = async (p) => {
  currentPage.value = p;
  pageData.value.pageNum = p;
  showNoticeData();
};
const tableChecked = ref([]);
const handleSelectionChange = (val) => {
  // console.log(val)
  tableChecked.value = val;
};
// const ids = ref([])
const delBatch = async (tableChecked) => {
  // console.log("批量删除");
  const arr = new Array();
  tableChecked.forEach((item) => {
    arr.push(item.id);
  });
  const ids = arr.join(",");
  if (tableChecked.length == 0) {
    ElMessage.warning("当前未勾选文件");
  } else {
    ElMessageBox.confirm("确定要删除吗？", "警告", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
      lockScroll: false, // 防止抖动
    })
      .then(async () => {
        const res = await deleteBatchNoticeData(ids);
        //  console.log("data数据"+res.data)
        if (res.code == 200) {
          ElMessage({
            showClose: true,
            message: "删除成功",
            type: "success",
          });
          // showList()

          showNoticeData();
        } else {
          ElMessage({
            showClose: true,
            message: res.data.msg,
            type: "error",
          });
        }
      })
      .catch(() => {
        ElMessage({
          type: "info",
          message: "取消删除",
        });
      });
  }
};
</script>

<style scoped>
</style>